<template>
	<view class="content">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="item in lunarr" :key="item.goods_id">
				<image :src="item.image_src" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav_item" v-for="item in daoarr" :key="item.name" @click="gonav(item.name)">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="tui">推荐商品</view>
		<!-- 列表渲染 -->
		<goodlist :listarr="listarr"></goodlist>
	</view>
</template>

<script>
	import goodlist from "../../components/goodlist.vue"
	export default {
		data() {
			return {
				lunarr:[],
				daoarr:[],
				listarr:[]
			}
		},
		components:{
			goodlist
		},
		onLoad() {
           this.getlun()  // 获取轮播图数据
		   this.getdao()  // 获取导航
		   this.getlist()  //获取列表
		},
		methods: {
			// 获取轮播图数据
         async getlun(){
			const res=await this.$myRequest({
				url:"/home/swiperdata"
			})
			// console.log(res.data.message)
			this.lunarr=res.data.message
		   },
		   // 获取导航
		  async getdao(){
			const res=await this.$myRequest({
				url:"/home/catitems"
			})
			console.log(res.data.message)
			this.daoarr=res.data.message
		    },
			// 获取列表
			async getlist(){
				const res=await this.$myRequest({
					url:"/home/floordata"
				})
				// console.log(res.data.message[0].product_list)
				this.listarr=res.data.message[0].product_list
			  },
			 // 去到导航页面
			  gonav(name){
				  console.log("name",name)
				 if(name=="分类"){
					 uni.navigateTo({
					 	url:"./fenlei"
					 })
				 }
				if(name=="秒杀拍"){
					 uni.navigateTo({
						url:"./miaosha"
					 })
				}
				if(name=="超市购"){
					 uni.navigateTo({
						url:"./chaoshi"
					 })
				}
				if(name=="母婴品"){
					 uni.navigateTo({
						url:"./muying"
					 })
				}
				// console.log(res.data.message[0].product_list)
			   },
		}
	}
</script>

<style lang="scss">
	.content{
		swiper{
			width: 100%;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.nav{
			width: 100%;
			display: flex;
			.nav_item{
				width: 25%;
				height: 200rpx;
				margin: 15rpx auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.tui{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color:$index-color;
			letter-spacing: 20rpx;
		}
	   
	}
	
</style>
